<template>
  <view class="intro-container">
    <view class="intro-left"  @click="goNext('about_us_agreement')">
      <view class="left-item">
        <text class="title">公司介绍</text>
        <text class="content">立刻了解我们的历史和使命</text>
      </view>
      <view class="left-img">
        <img src="../../static/images/1.png" alt="">
      </view>
    </view>
    <view class="intro-right">
      <view class="right-item" style="background-color: #C4E1FF;" @click="goNext2">
        <view class="item">
          <text class="title">农资产品</text>
          <text class="content">助力农业发展</text>
        </view>
        <view class="right-img">
          <img src="../../static/images/2.png" alt="">
        </view>
      </view>
      <view class="right-item" style="background-color: 	#FFE6D9;" @click="goNext('user_agreement')" >
        <view class="item">
          <text class="title">农技服务</text>
          <text class="content">专业技术支持</text>
        </view>
        <view class="right-img">
          <img src="../../static/images/3.png" alt="">
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang='ts'>
const goNext = (keyword: string) => {
    uni.navigateTo({
      url: '/pages/index/common_info/common_info2?type=' + keyword
    })
  }


  const goNext2 = () => {
    uni.switchTab({
      url: '/pages/category/category'
    })
  }
</script>

<style lang="scss">
  .intro-container {
    display: flex;
    background-color: #fff;
    margin: 10rpx;
    padding: 10rpx;

    .intro-left {
      width: 40%;
      display: flex;
      flex-direction: column;
      background-color: #E1FAED;
      border-radius: 20rpx;
      padding: 20rpx;
      margin: 10rpx 0;
      justify-content: space-between;

      .left-item {
        display: flex;
        flex-direction: column;

        .title {
          font-size: 36rpx;
          font-weight: bold;
        }

        .content {
          font-size: 28rpx;
          color: darkgray;
          line-height: 40rpx;
        }
      }

      .left-img {
        display: flex;
        width: 100%;
        justify-content: flex-end;

        img {
          width: 80rpx;
          height: 80rpx;
        }
      }

    }

    .intro-right {
      width: 60%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 20rpx;
      margin-right: 10rpx;
      // padding: 0 20rpx;
      justify-content: space-evenly;
      ;

      .right-item {
        display: flex;
        justify-content: space-between;
        flex: 1;
        width: 100%;
        background-color: #E1FAED;
        border-radius: 20rpx;
        padding: 20rpx;
        margin: 10rpx 0;

        // margin-left: 20rpx;
        // margin-right: 20rpx;
        // margin-bottom: 20rpx;
        .item {
          display: flex;
          flex-direction: column;

          .title {
            font-size: 36rpx;
            font-weight: bold;
          }

          .content {
            font-size: 28rpx;
            color: darkgray;
            line-height: 40rpx;
          }
        }

        .right-img {
          display: flex;
          // justify-content: flex-end;
          align-items: flex-end;
          height: 100%;

          img {
            width: 80rpx;
            height: 80rpx;
          }
        }

      }
    }
  }
</style>
